<template>
	<view class="baseForm">
		<view class="overhidden">
			<view v-show="!taskInfo?.id && loading === false" class="flex justify-center font-14" style="margin: 30px 0 30px 0">暂无信息</view>
			<u-loading-icon class="flex justify-center mt-20" textSize="18" v-show="loading"></u-loading-icon>
			<!-- 详情 -->
			<view class="detail card" v-if="taskInfo?.id && loading === false">
				<view class="flex flex-col justify-between flex-1 h-full">
					<view class="record-content">
						<view class="flex title justify-between" @click="() => (isCollapse = !isCollapse)" :class="!isCollapse ? 'u-m-b-24' : 'u-m-b-10'">
							<text>基本信息</text>
							<u-icon v-show="!isCollapse" name="arrow-up" color="#000a7b"></u-icon>
							<u-icon v-show="isCollapse" name="arrow-down" color="#000a7b"></u-icon>
						</view>
						<view v-show="!isCollapse">
							<view class="record-item">
								<text>设备编号</text>
								<text>{{ taskInfo?.assetCode || '' }}</text>
							</view>
							<view class="record-item">
								<text>设备名称</text>
								<text>{{ taskInfo?.assetName || '' }}</text>
							</view>
							<view class="record-item" v-if="taskInfo?.planName">
								<text>巡检任务</text>
								<text>{{ taskInfo?.planName || '' }}</text>
							</view>
							<view class="record-item" v-if="taskInfo?.locationName">
								<text>位置</text>
								<text>{{ taskInfo?.locationName || '' }}</text>
							</view>
							<view class="record-item" v-if="taskInfo?.executePersonName">
								<text>巡检人</text>
								<text>
									{{ taskInfo?.executePersonName || '' }}
								</text>
							</view>
							<view class="record-item" v-if="taskInfo?.workTime">
								<text>巡检时间</text>
								<text>
									{{ taskInfo?.workTime || '' }}
								</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="plan card record-content" style="margin-bottom: 70px" v-if="taskInfo?.id">
				<view v-show="!taskInfo?.details || taskInfo?.details.length === 0" class="flex justify-start grey-color" style="margin: 12px 0 10px">暂无点检信息</view>
				<view class="overhidden" v-for="(item, index) in taskInfo?.details" :key="index">
					<view>
						<view class="record-content">
							<view class="record-item">
								<view class="title_new">
									<view class="">
										<text class="require_icon" v-if="item?.sopItem.sopExecute == '1'">*</text>
										{{ item?.sopItemName || '' }}
										<u-icon
											v-if="item?.sopItem.sopItemMethod || item?.sopItem.sopItemStandardValue || item?.sopItem.sopItemTool || item?.sopItem.sopItemPosition"
											name="info-circle-fill"
											color="rgb(192, 196, 204)"
											size="18"
											@click="openInfoModal(item.sopItem)"
										></u-icon>
									</view>
								</view>
								<view class="" v-if="item.sopItem.standardValue == 1" style="max-width: 100px; min-width: 70px">
									<u--input
										v-if="props.isRead == 0"
										v-model="item.sopItemValue"
										placeholder="请输入"
										class="minInput"
										:class="sizeColorHandle(item.sopItemValue, item?.sopItem.standardMinValue, item?.sopItem.standardMaxValue)"
										inputAlign="right"
										clearable
										border="none"
									></u--input>

									<text
										v-else
										:class="sizeColorHandle(item.sopItemValue, item?.sopItem.standardMinValue, item?.sopItem.standardMaxValue)"
										style="text-align: right"
										class="text-span-flex-end"
									>
										{{ item.sopItemValue || '' }}
									</text>
								</view>
								<view class="" v-if="item.sopItem.standardValue == 2" style="max-width: 100px; min-width: 70px">
									<view v-if="props.isRead == 0 || props.isRead == 5" class="flex input-box" style="justify-content: flex-end">
										<view
											class="minInput"
											:class="sizeColorHandle1(item.sopItemValueId, item.sopItem.details ?? [])"
											@click.stop="hideKeyboard(index, item.sopItem.details ?? [])"
										>
											<view class="">
												{{ item.sopItemValue ? item.sopItemValue : '' }}
											</view>
											<view class="" style="color: #c0c4cc">
												{{ item.sopItemValue ? '' : '请选择' }}
											</view>
										</view>
										<image @click.stop="clearData(index)" v-if="item.sopItemValueId !== ''" src="@/static/image/delete.png" class="deleteIcon" />
									</view>
									<text v-else :class="sizeColorHandle1(item.sopItemValueId, item.sopItem.details ?? [])" class="text-span-flex-end">
										{{ item.sopItemValue || '' }}
									</text>
								</view>
							</view>
							<view class="flex" style="justify-content: space-between" v-if="item.sopItemResult == 0">
								<view class="">
									处理状态：{{
										item?.exceptionHandleStatus == 1 ? '待处理' : item?.exceptionHandleStatus == 2 ? '处理中' : item?.exceptionHandleStatus == 3 ? '已处理' : ''
									}}
								</view>
								<view class="">
									<text
										class="addBtn1"
										type="primary"
										text="维修"
										style="
											height: 24px;
											line-height: 24px;
											width: 60px;
											display: flex;
											justify-content: center;
											margin-left: 0;
											background-color: #0076ff;
											border-radius: 4px;
											color: #fff;
											font-size: 14px;
										"
										@click.stop="openRepair(item)"
									>
										{{ item.exceptionHandleStatus == '3' ? '维修' : '维修' }}
									</text>
								</view>
							</view>
							<!-- <view class="record-item" v-if="item.sopItem.standardValue == 1 && !(!item.sopItem.standardMinValue && !item.sopItem.standardMaxValue)">
										<text>上下限值</text>
										<text v-if="item?.sopItem.standardMinValue !== item?.sopItem.standardMaxValue">
											{{ item?.sopItem.standardMinValue || '' }}-{{ item?.sopItem.standardMaxValue || '' }}{{ item?.standardValueUnit || '' }}
										</text>
										<text v-else>{{ item?.sopItem.standardMinValue || '' }}{{ item?.sopItem.standardValueUnit || '' }}</text>
									</view> -->
							<view class="record-item" v-if="item.sopItemStandard">
								<text>标准要求</text>
								<text>{{ item.sopItemStandard }}</text>
							</view>
							<!-- <view
								class="record-item"
								v-if="item.sopItem.standardValue == 1">
								<view class="flex">
									实际值
									<text
										class="require_icon"
										v-if="item?.sopItem.sopExecute == '1'">
										*
									</text>
								</view>
								<u--input
									v-if="props.isRead == 0"
									v-model="item.sopItemValue"
									placeholder="请输入"
									class="minInput"
									:class="
										sizeColorHandle(
											item.sopItemValue,
											item?.sopItem.standardMinValue,
											item?.sopItem.standardMaxValue
										)
									"
									inputAlign="right"
									clearable
									border="none"></u--input>
								<text
									v-else
									:class="
										sizeColorHandle(
											item.sopItemValue,
											item?.sopItem.standardMinValue,
											item?.sopItem.standardMaxValue
										)
									">
									{{ item.sopItemValue || "" }}
								</text>
							</view>
							<view
								class="record-item"
								v-if="item.sopItem.standardValue == 2">
								<view class="flex">
									实际值
									<text
										class="require_icon"
										v-if="item?.sopItem.sopExecute == '1'">
										*
									</text>
								</view>
								<view
									v-if="props.isRead == 0"
									
									class="flex input-box">
									<view
										class="minInput"
										style="width:400rpx"
										:class="sizeColorHandle1(item.sopItemValueId, item.sopItem.details ?? [])"
										@click.stop="hideKeyboard(index, item.sopItem.details ?? [])"
										
									>
										<view class=""  >
											{{ item.sopItemValue? item.sopItemValue:'' }}
										</view>
										<view class="" style="color:#c0c4cc">
											{{ item.sopItemValue? '':'请选择' }}
										</view>
									</view>
									<image
										@click.stop="clearData(index)"
										v-show="item.sopItemValueId"
										src="@/static/image/delete.png"
										class="deleteIcon" />
								</view>
								<text
									v-else
									:class="
										sizeColorHandle1(
											item.sopItemValueId,
											item.sopItem.details ?? []
										)
									">
									{{ item.sopItemValue || "" }}
								</text>
							</view> -->

							<!-- 增加问题描述 problemDesc-->
							<!-- <view class="record-item" v-if="props.isRead == 0">
								<view class="flex">问题描述</view>
								<u--textarea
									v-model="item.problemDesc"
									placeholder="请输入"
									class="minTextarea"
									inputAlign="right"
									clearable
									border="none"
									maxlength="250"
									autoHeight
									height="auto"></u--textarea>
							</view>
							<view
								class="record-item"
								v-if="props.isRead != 0 && item.problemDesc">
								<view class="flex">问题描述</view>
								<text>{{ item.problemDesc || "" }}</text>
							</view> -->
						</view>
						<!-- 待需要上传图片后启用 -->
						<view class="mt-8 flex" v-if="item.sopItem.sopImage == '1'">
							<upload-image
								:multiple="false"
								:key="index"
								:keys="index"
								@fileChange="(list) => getImages(list, index)"
								:list="item.images ?? []"
								:capture="capture"
								:isRead="props.isRead == 1 ? true : false"
								folderName="eam/equ/routingInspection"
							></upload-image>
						</view>
					</view>
					<u-divider v-show="index + 1 !== taskInfo?.details.length"></u-divider>
				</view>

				<!-- 查看页面并且没有现场图片则不展示 -->

				<view>
					<view class="title flex justify-between">
						<text class="mt-4">现场图片</text>
					</view>

					<view class="mt-8">
						<view class="mt-8 flex">
							<upload-image
								folderName="eam/equ/routingInspection"
								:multiple="false"
								:keys="4545"
								@fileChange="getSceneImages"
								:list="taskInfo.images ?? []"
								:capture="capture"
							></upload-image>
						</view>
					</view>
				</view>
			</view>
			<view v-if="props.isRead == 0" style="margin-top: -60px; margin-bottom: 60px" class="detail card">
				<view class="flex flex-col flex-1 h-full">
					<view class="record-item">
						<view class="flex title justify-between" style="margin: 6px 0 !important">
							<text>问题描述</text>
						</view>
					</view>
					<view>
						<u--textarea
							v-model="taskInfo.problemDesc"
							placeholder="请输入"
							class="minTextarea"
							inputAlign="right"
							clearable
							border="none"
							maxlength="250"
							autoHeight
							height="auto"
						></u--textarea>
					</view>
				</view>
			</view>
			<view class="detail card" style="margin-top: -60px; margin-bottom: 60px" v-if="props.isRead == 1 && taskInfo.problemDesc">
				<view class="record-content">
					<view class="record-content">
						<view class="flex title justify-between" style="margin: 6px 0 !important">
							<text>问题描述</text>
						</view>
					</view>
					<view>
						<view class="font-14" style="word-break: break-all">
							{{ taskInfo.problemDesc || '' }}
						</view>
					</view>
				</view>
			</view>
			<!-- 提交 -->
			<view v-if="props.isRead == 0" class="submit_btn_div">
				<button type="default" class="grey_btn" :disabled="saveLoading" :loading="saveLoading" @click="saveSubmit">保 存</button>
				<button type="primary" :disabled="postLoading" :loading="postLoading" @click="submit" class="submit_btn">提 交</button>
			</view>
		</view>
		<!-- 实际值选择picker -->
		<u-picker
			:show="showPicker"
			:columns="currentColumns"
			:defaultIndex="defaultIndex"
			keyName="text"
			immediateChange
			@cancel="showPicker = false"
			@confirm="changeData"
		></u-picker>
		<u-modal :show="showInfo" :content="contentInfo" @confirm="showInfo = false"></u-modal>
	</view>
</template>

<script lang="ts" setup>
import { ref, reactive, toRaw } from 'vue';
import { onShow, onLoad } from '@dcloudio/uni-app';
import { http } from '@/utils/http';
// import { mockData } from './index';
import UploadImage from '@/components/upload-image-ssr.vue';
import ScanBar from '@/components/scan-bar/index.vue';
import { sizeColorHandle1, sizeColorHandle } from '@/utils/common';

const props = defineProps({
	id: {
		type: String,
		default: ''
	},
	isRead: {
		type: String,
		default: '0' // 1是查看
	}
});

// 是否折叠
const isCollapse = ref(false);

// 作业方法提示框
const showInfo = ref(false);
const contentInfo = ref('');
function openInfoModal(data) {
	showInfo.value = true;
	contentInfo.value = '';
	if (data.sopItemMethod) {
		contentInfo.value += `作业方法：${data.sopItemMethod}\n\n`;
	}
	if (data.sopItemStandardValue) {
		contentInfo.value += `作业标准：${data.sopItemStandardValue}\n\n`;
	}
	if (data.sopItemTool) {
		contentInfo.value += `作业工具：${data.sopItemTool}\n\n`;
	}
	if (data.sopItemPosition) {
		contentInfo.value += `作业部位：${data.sopItemPosition}\n\n`;
	}
	// contentInfo.value = data.sopItemMethod?`作业方法：${data.sopItemMethod}\n`:data.sopItemStandardValue?`作业标准：${data.sopItemStandardValue}\n`:'';
}

onLoad(() => {
	props.id && getDeviceInfo();
});

// onShow(() => {
// 	props.id && getDeviceInfo();
// });
/**
 * 选择实际值
 */
const showPicker = ref(false);
const currentColumns = reactive([[]]);
const currentIndex = ref();
const defaultIndex = ref([0]);

/**
 * 组织键盘弹出
 */
function hideKeyboard(index, list) {
	const lists = JSON.parse(JSON.stringify(list));
	lists.forEach((item) => {
		item.text = `${item.standardValue} - ${item.resultValue == '1' ? '正常' : '异常'}`;
	});
	currentIndex.value = index;
	currentColumns[0] = lists ?? [];
	// 给原有的值,赋值picker默认index
	const sopItemValueId = taskInfo.value.details[index].sopItemValueId;
	if (sopItemValueId) {
		const currentIndex = list.findIndex((self) => self.id === sopItemValueId);
		defaultIndex.value = [currentIndex];
	} else {
		defaultIndex.value = [0];
	}
	showPicker.value = true;
	uni.hideKeyboard();
}
function clearData(index) {
	taskInfo.value.details[index].sopItemValueId = '';
	taskInfo.value.details[index].sopItemValue = '';
	showPicker.value = false;
}
function changeData(e) {
	taskInfo.value.details[currentIndex.value].sopItemValue = e.value[0].standardValue;
	taskInfo.value.details[currentIndex.value].sopItemValueId = e.value[0].id;
	showPicker.value = false;
}

// 表单详情
let formData = reactive({
	consumeCode: ''
});

// 初始化页面，获取检查详情
let taskInfo = ref<any>({});
const loading = ref(false);

// 表单规则定义
const rules = ref({});

// 摄像头参数设置
const capture = ref(['camera', 'album']);
// 获取图片
function getImages(list, index) {
	const current = JSON.parse(JSON.stringify(taskInfo.value.details))[index];
	current.images = [];
	list?.forEach((item) => {
		current.images.push(item);
	});
	const elder = JSON.parse(JSON.stringify(taskInfo.value.details));
	elder[index] = current;
	taskInfo.value.details = elder;
}

// 获取现场图片
function getSceneImages(list) {
	taskInfo.value.images = list;
}

// form信息重置
function resetData() {
	taskInfo.value = {};
	formData.consumeCode = '';
	uni.pageScrollTo({
		scrollTop: 0,
		duration: 100
	});
}

// 重置表单信息 & 光标自动blur
const scanBarRef = ref();
const datekey = ref(new Date());
function resetFields() {
	resetData();
	scanBarRef.value.reset();
	datekey.value = new Date();
}

// 校验提交
const uForm = ref();

// 保存
const saveLoading = ref(false);
const list = ref([]);
async function saveSubmit() {
	// 校验是否录入工装编号成功
	if (!taskInfo.value.id) {
		uni.showToast({
			title: '任务id不能为空',
			icon: 'none'
		});
		return false;
	}

	// 校验判断数字
	for (let i = 0; i < taskInfo.value.details.length; i++) {
		if (taskInfo.value.details[i].sopItem.standardValue == '1') {
			if (isNaN(Number(taskInfo.value.details[i].sopItemValue))) {
				uni.showToast({
					title: `${taskInfo.value.details[i].sopItemName}的实际值只能为数字`,
					icon: 'none'
				});
				return false;
			}
		}
	}
	// save提交
	saveLoading.value = true;
	const result: any = await http({
		method: 'POST',
		url: `/eam/equRouteInspectionOrder/save `,
		data: toRaw(taskInfo.value)
	}).catch(() => {
		saveLoading.value = false;
	});
	if (result?.code == 200) {
		uni.showToast({
			title: '保存成功'
		});
		// uni.navigateBack();
	}
	saveLoading.value = false;
}

// 提交
const postLoading = ref(false);
async function submit() {
	// 校验是否录入工装编号成功
	if (!taskInfo.value.id) {
		uni.showToast({
			title: '任务id不能为空',
			icon: 'none'
		});
		return false;
	}
	// 校验必填项是否填写
	const infos = taskInfo.value?.details ?? [];
	if (infos.length) {
		for (let i = 0; i < infos.length; i++) {
			if (infos[i].sopItem.sopExecute == '1' && !infos[i].sopItemValue) {
				uni.showToast({
					title: `${infos[i].sopItemName}的实际值不能为空`,
					icon: 'none'
				});
				return false;
			}
		}
	}

	// 校验判断数字
	for (let i = 0; i < taskInfo.value.details.length; i++) {
		if (taskInfo.value.details[i].sopItem.standardValue == '1') {
			if (isNaN(Number(taskInfo.value.details[i].sopItemValue))) {
				uni.showToast({
					title: `${taskInfo.value.details[i].sopItemName}的实际值只能为数字`,
					icon: 'none'
				});
				return false;
			}
		}
	}
	if (taskInfo.value?.images?.length == 0) {
		uni.showToast({
			title: `现场图片不能为空！`,
			icon: 'none'
		});
		return false;
	}
	// save提交
	postLoading.value = true;
	const result: any = await http({
		method: 'POST',
		url: `/eam/equRouteInspectionOrder/submit`,
		data: toRaw(taskInfo.value)
	}).catch(() => {
		postLoading.value = false;
	});
	if (result?.code == 200) {
		uni.showToast({
			title: '提交成功'
		});
		uni.navigateBack();
	}
	postLoading.value = false;
}

// 获取工装信息（接口请求）
async function getDeviceInfo() {
	loading.value = true;
	const data: any = await http({
		method: 'GET',
		url: `/eam/equRouteInspectionOrder/get/${props.id}`,
		data: {}
	}).catch(() => {
		loading.value = false;
	});
	if (data?.data) {
		taskInfo.value = data?.data;
	}
	loading.value = false;
	// 模拟数据返回，调试使用（保留）
	// setTimeout(() => {
	// 	loading.value = false;
	// 	taskInfo.value = JSON.parse(JSON.stringify(mockData));
	// }, 500);
}

// 维修按钮
const openRepair = (item) => {
	uni.navigateTo({
		url: `/pages/eam/equ/routingInspection/repair?status=${item.exceptionHandleStatus}&id=${item.id}&isRead=${item.exceptionHandleStatus == 1 ? 0 : 0}`,
		fail: () => {
			uni.showToast({
				title: '敬请期待',
				icon: 'error'
			});
		}
	});
};
</script>

<style lang="scss" scoped>
@import '@/static/css/standard_item.scss';

.card {
	background-color: #fff;
	margin: 10px 10px;
	border-radius: 8px;
	padding: 12px 12px;
	transition: all 300ms ease;
	box-shadow: 0 2px 6px rgba(3, 121, 255, 0.05);
}

:deep(.u-modal__content__text) {
	font-size: 14px;
}

:deep(.u-modal__content) {
	padding: 15px 15px 0;
}
</style>
